JavaScript: functionとアロー関数の違い
関数内のthisの挙動が違う。
functionはあるオブジェクトのメソッドとして呼び出されるとthisはそのオブジェクトを指す。
アロー関数はthisはグローバル。
code:js
this.foo = 1;
function f() {
console.log(this.foo);
}
const g = () => {
console.log(this.foo);
};
const obj = {
foo: 2,
f: f,
g: g
};
obj.f(); // 2
obj.g(); // 1
この場合、f()のthisは{foo: 2, f: f(), g: g()}で、g()のthisは{foo: 1}になる。
thisを使う場合、functionはどのオブジェクトのメンバになるかで挙動が変わるため、バグの原因になる可能性がある。